<template>
	<view class="detail-view" v-if="goodsDetail">
		<view class="u-demo-block">
			<!-- <u-gap bgColor="transparent" height="15"></u-gap> -->
			<u-swiper :list="list6" @change="e => currentNum = e.current + 1" @click="swiperClick" :autoplay="false"
				indicatorStyle="right: 40rpx" bgColor="#fff" imgMode="aspectFit" height="626rpx" indicator autoplay
				circular duration="150">
				<view slot="indicator" class="indicator-num">
					<text class="indicator-num__text">{{ currentNum }}/{{ list6.length }}</text>
				</view>
			</u-swiper>
		</view>
		<view class="layout">
			<view class="price">
				<view class="name">
					{{$t("goodsReleased.language") == "zh"?goodsDetail.commodity:goodsDetail.commodityEn}}
				</view>
				<view class="titleNew" v-if="wishDetail">{{$t("commDetail.newPrice")}}</view>
				<view class="price-num">
					<text class="price-num-b" v-if="goodsDetail || wishDetail">
						$ {{wishDetail?String(wishDetail).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'):String(goodsDetail.money).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')}}</text>
					<!-- <image class="up-icon" src="../../static/icon/image_113.png" mode=""></image>
					<text class="price-num-s">${{String(goodsDetail.originalPrice-goodsDetail.money).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')}} ( {{((goodsDetail.originalPrice-goodsDetail.money)/goodsDetail.originalPrice).toFixed(1)}}% )</text> -->
					<view class="sold-goods" v-if="goodsDetail.status == 3 && !wishDetail">
						{{$t("GoodsItem.count")}}
					</view>
				</view>

			</view>
			<!-- 			<view class="status">
				<view class="condition">成色:<text style="margin-left: 10rpx;color: #26d743;">全新</text></view>
				<view class="abrasion">磨损程度:<text style="margin-left: 10rpx;color: #faae69;">轻微</text></view>
			</view> -->
			<view class="commodity-info">
				<!-- <view class="titleGoods">{{$t("commDetail.detail")}}</view> -->

				<view class="commodity-text temp">
					<view class="ls" v-if="condition.length > 0">
						{{$t("language") == "zh"?condition[0].parentName:condition[0].parentEndName}}: <text class="bd"
							style="margin-left: 10rpx;text-transform: none;">{{$t("language") == "zh"?condition[0].brandName:condition[0].brandEngName?condition[0].brandEngName:condition[0].brandName}}</text>
					</view>

					<view class="ls">
						<!-- {{$t("commDetail.desc")}}: --> <text class="bd no-margin ls-width"
							style="margin-left: 10rpx;text-transform: none;">{{$t("language") == "zh"?goodsDetail.shopDescribe:goodsDetail.shopDescribeEn}}</text>
					</view>

					<view class="ls" v-if="!wishDetail">
						{{$t("commDetail.sku")}}: <text class="bd"
							style="margin-left: 10rpx;text-transform: none;">{{goodsDetail.sku}}</text>
					</view>
					<view class="ls" v-if="Origin.length>0">
						{{$t("language") == "zh"?Origin[0].parentName:Origin[0].parentEndName}}: <text class="bd"
							style="margin-left: 10rpx;text-transform: none;">{{$t("language") == "zh"?Origin[0].brandName:Origin[0].brandEngName}}</text>
					</view>
				</view>



				<view class="commodity-text temp">
					<view class="ls" v-if="filterBrand.length > 0">
						{{$t("language") == "zh"?filterBrand[0].parentName:filterBrand[0].parentEndName}}: <text
							class="bd"
							style="margin-left: 10rpx;text-transform: none;">{{$t("language") == "zh"?filterBrand[0].brandName:filterBrand[0].brandEngName?filterBrand[0].brandEngName:filterBrand[0].brandName}}</text>
					</view>
					<view class="ls" v-else>
						{{$t("commDetail.brand")}}: <text class="bd"
							style="margin-left: 10rpx;text-transform: none;color: red;">{{$t("commDetail.none")}}</text>
					</view>
				</view>

				<view class="commodity-text" v-if="goodsDetail.measurement">
					<view class="ls">
						{{$t("goodsReleased.dimensions")}}:
					</view>
					<view class="ls font-col">
						{{$t("commDetail.length")}}: <text class="bd"
							style="margin-left: 10rpx;text-transform: none;">{{goodsDetail.measurement.indexOf("x") === -1?goodsDetail.measurement.split("*")[0]:goodsDetail.measurement.split("x")[0]}}</text>
					</view>
					<view class="ls font-col">
						{{$t("commDetail.height")}}: <text class="bd"
							style="margin-left: 10rpx;text-transform: none;">{{goodsDetail.measurement.indexOf("x") === -1?goodsDetail.measurement.split("*")[1]:goodsDetail.measurement.split("x")[2]}}</text>
					</view>
					<view class="ls font-col">
						{{$t("commDetail.width")}}: <text class="bd"
							style="margin-left: 10rpx;text-transform: none;">{{goodsDetail.measurement.indexOf("x") === -1?goodsDetail.measurement.split("*")[2]:goodsDetail.measurement.split("x")[1]}}</text>
					</view>

				</view>

				<view class="commodity-text temp" v-if="series">
					<view class="ls">
						{{$t("language") == "zh"?series[0].parentName:series[0].parentEndName}}: <text class="bd"
							style="margin-left: 10rpx;text-transform: none;">{{$t("language") == "zh"?series[0].brandName:series[0].brandEngName?series[0].brandEngName:series[0].brandName}}</text>
					</view>
				</view>

				<view class="commodity-text" v-if="goodsDetail.category">
					<view class="lh plaWid" v-if="item.parentName !== '品类'" v-for="item in goodsDetail.category" :key="item.id">
						{{$t("language") == "zh"?item.parentName:item.parentEndName}}: <text class="bd"
							style="margin-left: 10rpx;text-transform: none;">{{$t("language") == "zh"?item.brandName:item.brandEngName}}</text>
					</view>
				</view>

				<view class="commodity-text temp" v-if="goodsDetail.productionTime&&goodsDetail.productionTime!='1979'">
					<view class="ls">
						{{$t("goodsReleased.year")}}: <text class="bd"
							style="margin-left: 10rpx;text-transform: none;">{{goodsDetail.productionTime}}</text>
					</view>
				</view>
				<view class="commodity-text temp">
					<view class="ls" v-if="addr.length > 0">
						{{$t("language") == "zh"?addr[0].parentName:addr[0].parentEndName}}: <text class="bd"
							style="margin-left: 10rpx;text-transform: none;">{{$t("language") == "zh"?addr[0].brandName:addr[0].brandEngName?addr[0].brandEngName:condition[0].brandName}}</text>
					</view>
				</view>
			</view>

			<view class="commodity-info">
				<view class="commodity-text">
					<view class="lh plaWid" v-if="fixedShow" v-for="item in fixedShow" :key="item.id">
						{{$t("language") == "zh"?item.brandName:item.brandEngName}}: <text class="bd"
							style="margin-left: 10rpx;text-transform: none;">{{$t("language") == "zh"?item.children[0].brandName:item.children[0].brandEngName}}</text>
					</view>
				</view>
			</view>

			<view class="commodity-recommend">
				<view class="title">
					<view class="rec-left">

					</view>
					<view class="rec-left-dot">

					</view>
					<template v-if="recommendGoodsList">
						{{recommendGoodsList.length>0?$t("commDetail.recomm"):$t("commDetail.recommNo")}}
					</template>
					<view class="rec-right-dot">

					</view>
					<view class="rec-right">

					</view>
				</view>
				<view class="look-more" @tap="goLookShinee">
					<image src="../../static/icon/image_44.png" class="more-img" mode=""></image>
					<text>{{$t("commDetail.more")}}</text>
				</view>
				<!-- <more-item :item="item" v-for="item in recommendGoodsList" :key="item.id"  /> -->
				<view class="comm-goods-list" v-if="!recommNo">
					<view class="comm-goods-item" @tap="goCommDetails(item.id)" v-if="index <= 3 && item"
						v-for="(item, index) in recommendGoodsList" :key="item.id">
						<image class="comm-goods-img" v-if="item.morebagPublishPictures.length > 0"
							:src="item.morebagPublishPictures[0].picture" mode="aspectFit"></image>
						<view class="comm-goods-name">
							{{$t("goodsReleased.language") == "zh"?item.commodity:item.commodityEn}}
						</view>
						<view class="comm-goods-desc">
							<view class="comm-goods-desc-price">
								$ {{String(item.money).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')}}
							</view>
							<!-- <view class="comm-goods-desc-low">
								{{$t('common.lowestQuotation')}}
							</view> -->
							<view class="comm-goods-desc-count">
								<!-- {{item.status == 1?$t('common.noSold'):$t('common.sold')}} -->
							</view>
						</view>
					</view>
				</view>

				<view class="recomm" v-else>
					{{recommNo}}
				</view>
			</view>

			<view class="push-goods" v-if="wishDetail && !(userId == goodsDetail.customerId)" @tap="createPushGoods">
				{{$t("commDetail.pushGoods")}}
			</view>

			<view class="price-record" v-if="!wishDetail && series && categories1.length > 2">
			<!-- 发行统计 -->
				<view class="title">
					{{$t("commDetail.issue")}}
				</view>

				<view class="charts-tab">
					<!-- <view class="tab" @tap="tabCurrent = index" :class="{tabActive: tabCurrent == index}" v-for="(item, index) in tabs">
						{{item}}
					</view> -->
				</view>

				<view class="chats-view">
					<qiun-data-charts type="area" :opts="opts1" :chartData="chartData1" />
				</view>

				<!-- <view class="price-history">
					<view class="history-data">
						{{$t("commDetail.historyRecord1")}}
					</view>

					<view class="history-list">
						<view class="history-item">
							<view class="history-key">
								{{$t("commDetail.historyRecord2")}}
							</view>
							<view class="history-value">
								{{historyMin + "$"}} - {{historyMax + "$"}}
							</view>
						</view>

						<view class="history-item">
							<view class="history-key">
								{{$t("commDetail.historyRecord2")}}
							</view>
							<view class="history-value">
								{{volatility + "%"}}
							</view>
						</view>
					</view>
				</view>

				<view class="record-btn">
					<view class="sales-record" @tap="goSalesRecord">
						{{$t("commDetail.sales")}}
					</view>

					<view class="see-bid" @tap="goLookShinee">
						{{$t("commDetail.lookSame")}}
					</view>
				</view> -->
			</view>

			<!-- <view class="price-record" v-if="!wishDetail && seriesData[0]"> -->
			<view class="price-record" v-if="!wishDetail && categories.length > 2">
				<view class="title">
					{{$t("commDetail.priceRecord")}}
				</view>

				<!-- <view class="charts-tab">
					<view class="tab" @tap="tabCurrent = index" :class="{tabActive: tabCurrent == index}" v-for="(item, index) in tabs">
						{{item}}
					</view>
				</view> -->

				<view class="chats-view">
					<qiun-data-charts type="area" :opts="opts" :chartData="chartData" />
				</view>

				<view class="price-history">
					<view class="history-data">
						{{$t("commDetail.historyRecord1")}}
					</view>

					<view class="history-list">
						<view class="history-item">
							<view class="history-key">
								{{$t("commDetail.historyRecord2")}}
							</view>
							<view class="history-value">
								{{historyMin + "$"}} - {{historyMax + "$"}}
							</view>
						</view>

						<view class="history-item">
							<view class="history-key">
								{{$t("commDetail.historyRecord3")}}
							</view>
							<view class="history-value">
								{{volatility + "%"}}
							</view>
						</view>
					</view>
				</view>

				<view class="record-btn">
					<view class="sales-record" @tap="goSalesRecord">
						{{$t("commDetail.sales")}}
					</view>

					<view class="see-bid" @tap="goLookShinee">
						{{$t("commDetail.lookSame")}}
					</view>
				</view>
			</view>

			<view class="price-btn" v-if="!wishDetail">

				<view class="price-btn-style" @tap="goLookPrice">
					{{$t("commDetail.quote")}}
				</view>
			</view>

			<view class="pla">

			</view>
		</view>
		<view class="btn" v-if="(goodsDetail.status == 1 || goodsDetail.status == 11) && goodsDetail.customerId !== userId && !wishDetail">
			<view class="toggleCart" @tap="goBid">{{bidName}}</view>
			<view class="toggleCart1"
				v-if="(goodsDetail.status == 1 || goodsDetail.status == 11) && goodsDetail.customerId !== userId" @tap="addTheCart">
				{{$t("commDetail.addCart")}}
			</view>
			<view class="toggleBuy" @tap="goBuy">{{$t("commDetail.buy")}}</view>
		</view>

		<u-popup :show="bigImgShow" @close="bigImgShow=false" mode="center" closeOnClickOverlay>
			<movable-area scale-area @tap="bigImgShow=false">
				<movable-view direction="all" scale="true" scale-min="1" scale-max="4" :scale-value="scale"
					@dblclick="dblclick" :scale="true">
					<image class="enlargeImg" :src="bigImg" mode="widthFix"></image>
				</movable-view>
			</movable-area>
		</u-popup>
	</view>
</template>

<script>
	import moreItem from '@/components/moreItem.vue'
	import {
		getCommDetail,
		getCommCateDetail,
		addCart,
		addFootprint,
		getCategoryGoods,
		getHistoryMoney,
		getIssueMoney,
		getFixedShow,
		getBid
	} from "@/common/api.js"
	import uCharts from '@/uni_modules/qiun-data-charts/js_sdk/u-charts/config-ucharts.js';

	export default {
		components: {
			moreItem,
		},
		data() {
			return {
				ishot:false,
				// 原产地
				Origin:"",
				scale: 1,
				bidName: "",
				bigImgShow: false,
				userId: null,
				volatility: 0,
				historyMax: 0,
				bigImg: "",
				historyMin: 0,
				categories: [],
				seriesData: [],
				categories1: [],
				seriesData1: [],
				fixedShow: null,
				series: null,
				goodsDetail: "",
				id: 0,
				currentNum: 1,
				recommendGoodsList: null,
				tabCurrent: 5,
				tabs: [this.$t("commDetail.oneMth"), this.$t("commDetail.threeMth"), this.$t("commDetail.sixMth"), this.$t(
					"commDetail.cy"), this.$t("commDetail.oneYr"), this.$t("commDetail.all")],
				list6: [],
				recommNo: null,
				chartData1: {},
				opts1: {
					dataPointShape: false,
					dataLabel: false,
					color: ["#FAAD67", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],

					padding: [15, 15, 0, 15],
					legend: {},
					// enableScroll: true,//开启图表拖拽功能
					xAxis: {
						itemCount:4,//x轴单屏显示数据的数量，默认为5个
						labelCount:2,
						// scrollShow:true,//新增是否显示滚动条，默认false
						// scrollAlign:'left',//滚动条初始位置
						disableGrid: false,
						boundaryGap: "justify",
						fontColor: "#000",
						fontSize: 10
					},
					yAxis: {
						gridType: "solid",
						dashLength: 2,
						// showTitle: true,
						data: [{
							fontColor: "#000",
							fontSize: 10,
							// title: this.$t("commDetail.company") + ": $",
							// unit: "$",
							format: 'yAxisDemo1'
						}]
					},
					extra: {
						area: {
							type: "straight",
							opacity: 0.3,
							addLine: true,
							width: 2,
							gradient: false
						},
					}
				},
				chartData: {},
				filterBrand: [],
				condition: [],
				addr: [],
				//您可以通过修改 config-ucharts.js 文件中下标为 ['line'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					dataPointShape: false,
					dataLabel: false,
					color: ["#FAAD67", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 15],
					legend: {},
					xAxis: {
						disableGrid: false,
						boundaryGap: "justify",
						fontColor: "#000",
						fontSize: 10
					},
					yAxis: {
						gridType: "solid",
						dashLength: 2,
						// showTitle: true,
						data: [{
							fontColor: "#000",
							fontSize: 10,
							// title: this.$t("commDetail.company") + ": $",
							// unit: "$",
							format: 'yAxisDemo1'
						}]
					},
					extra: {
						area: {
							type: "straight",
							opacity: 0.3,
							addLine: true,
							width: 2,
							gradient: false
						},
					}
				}
			}
		},
		methods: {

			dblclick() {
				if (this.scale == 10) {
					this.scale = 1;
				} else {
					this.scale = 10;
				}
			},
			// 推送商品
			createPushGoods() {
				uni.navigateTo({
					url: `/pages/editGoods/editGoods?wish=${this.goodsDetail.customerId}&goods=${encodeURIComponent(JSON.stringify(this.goodsDetail))}`,
					success() {

					},
					fail(res) {
						console.log(res);
					}
				})
			},
			async initBidName() {
				const res = await getBid({
					commodityId: this.id
				});
				if (res.code == 200) {
					const filterBid = res.rows.filter(item => item.userId == uni.getStorageSync("userId"));
					if (filterBid.length > 0) {
						this.bidName = this.$t("commDetail.offer1");
					} else {
						this.bidName = this.$t("commDetail.offer");
					}
				}
			},
			// 点击查看大图
			swiperClick(index) {
				this.bigImg = this.list6[index];
				this.bigImgShow = true;
			},
			// 推荐产品详情页
			goCommDetails(id) {
				uni.navigateTo({
					url: `/pages/commodityDetails/commodityDetails?id=${id}`
				})
			},
			// 加入购物车
			async addTheCart() {
				if (this.goodsDetail.customerId == this.userId) {
					uni.showToast({
						icon: 'none',
						title: this.$t("commDetail.myself"),
						duration: 1200
					})
					return
				}
				let isLogin = true;
				if (!uni.getStorageSync("token")) {
					isLogin = false;
					uni.redirectTo({
						url: "/pages/login/login"
					})
				}
				if (!isLogin) return
				const res = await addCart({
					commodityId: this.goodsDetail.id
				});
				if (res.code == 200) {
					uni.showToast({
						icon: 'none',
						title: this.$t("commDetail.cartSuccce"),
						duration: 980
					})
				} else if (res.code == 400) {
					uni.showToast({
						icon: 'none',
						title: this.$t("commDetail.err"),
						duration: 980
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: this.$t("commDetail.cartFail"),
						duration: 980
					})
				}
			},
			// 查看出价页面
			goLookPrice() {
				uni.navigateTo({
					url: `/pages/lookPrice/lookPrice?item=${encodeURIComponent(JSON.stringify(this.goodsDetail))}`
				})
			},
			goSalesRecord() {
				uni.navigateTo({
					url: `/pages/salesRecord/salesRecord?classificationId=${encodeURIComponent(JSON.stringify(this.goodsDetail.classificationId))}`
				})
			},
			goLookShinee() {
				uni.navigateTo({
					url: `/pages/lookShinee/lookShinee?classificationId=${encodeURIComponent(JSON.stringify(this.goodsDetail.classificationId))}`
				})
			},
			getServerData() {
				//模拟从服务器获取数据时的延时
				//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
				let res = {
					categories: this.categories,
					series: [{
						name: "",
						legendShape: "none",
						data: this.seriesData
					}],

				};
				this.chartData = JSON.parse(JSON.stringify(res));
			},
			goBuy() {
				if (this.goodsDetail.customerId == this.userId) {
					uni.showToast({
						icon: 'none',
						title: this.$t("commDetail.myself"),
						duration: 1200
					})
					return
				}
				let isLogin = true;
				if (!uni.getStorageSync("token")) {
					isLogin = false;
					uni.redirectTo({
						url: "/pages/login/login"
					})
				}
				if (!isLogin) return
				if (this.goodsDetail) {
					uni.navigateTo({
						url: `/pages/bidBuy/bidBuy?current=${1}&id=${this.goodsDetail.id}&item=${encodeURIComponent(JSON.stringify(this.goodsDetail))}&series=${encodeURIComponent(JSON.stringify(this.series))}&filterBrand=${encodeURIComponent(JSON.stringify(this.filterBrand))}&addr=${encodeURIComponent(JSON.stringify(this.addr))}&condition=${encodeURIComponent(JSON.stringify(this.condition))}`
					})
				}
			},
			goBid() {
				if (this.goodsDetail.customerId == this.userId) {
					uni.showToast({
						icon: 'none',
						title: this.$t("commDetail.myself"),
						duration: 1200
					})
					return
				}
				if (this.goodsDetail) {
					uni.navigateTo({
						url: `/pages/bidBuy/bidBuy?current=${0}&id=${this.goodsDetail.id}&item=${encodeURIComponent(JSON.stringify(this.goodsDetail))}&series=${encodeURIComponent(JSON.stringify(this.series))}&filterBrand=${encodeURIComponent(JSON.stringify(this.filterBrand))}&addr=${encodeURIComponent(JSON.stringify(this.addr))}&condition=${encodeURIComponent(JSON.stringify(this.condition))}`
					})
				}
			},
			async recommendGoods() {
				const res = await getCategoryGoods(this.goodsDetail.classificationId)
				if (res.rows.length > 0) {
					this.recommendGoodsList = res.rows.filter(item => item.status == 1);
				} else {
					this.recommNo = this.$t('commDetail.recomm')
				}
			},
			async initData() {
				const res1 = await getCommDetail(this.id);
				const res2 = await getCommCateDetail(this.id);
				res2.data.forEach((item)=>{

					if(item.parentName== "系列"){

						if(item.isHot=='1'){
							this.ishot=true
						}
					}
				})

				let index = null;
				for (let i = 0; i < res2.data.length; i++) {
					if (res2.data[i].parentName === "系列" || res2.data[i].parentEndName === "series") {
						index = i;
						break;
					}
				}
				if (index) {
					this.series = res2.data.splice(index, 1);
				}
				this.goodsDetail = res1.data;
				this.goodsDetail["category"] = res2.data.filter(item => item.parentName != "品牌" && item.parentName !=
					"成色" && item.parentName != "所在地"&&item.parentName != "原产地");
				this.goodsDetail["wishMoney"] = this.wishDetail;
				this.Origin=res2.data.filter(item => item.parentName == "原产地");
				if(this.Origin[0]){
				this.Origin[0].parentEndName='Origin'
				}


				this.filterBrand = res2.data.filter(item => item.parentName == "品牌");
				this.condition = res2.data.filter(item => item.parentName == "成色");
				this.addr = res2.data.filter(item => item.parentName == "所在地");
				this.list6 = [];
				this.goodsDetail.morebagPublishPictures.forEach(item => {
					this.list6.push(item.picture)
				});
				let changdu=[]
				changdu=this.goodsDetail.measurement.split("*")
				if(changdu.length !=3){
					changdu=this.goodsDetail.measurement.split("x")
				}
				if(changdu.length !=3){
					changdu=this.goodsDetail.measurement.split("X")
				}

				if ( changdu[0].substring(changdu[0].length-2) != "cm" && changdu[0].substring(changdu[0].length-2)!= "CM"){

								changdu[0]=changdu[0]+'cm'
								changdu[1]=changdu[1]+'cm'
								changdu[2]=changdu[2]+'cm'

				}

					this.goodsDetail.measurement=changdu[0]+"*"+changdu[1]+"*"+changdu[2]
				var peijian ={
					brandEngName: "",
					brandName:"",
					parentEndName:"Accessory",
					parentName:'附加配件',

				}
					this.goodsDetail.category.forEach((item,index)=>{

						if(item.parentName == "附加配件"){

							peijian.brandName+=item.brandName+','
							peijian.brandEngName+=item.brandEngName+','
						}
					})
					peijian.brandName = peijian.brandName.substring(0, peijian.brandName.length - 1);
					peijian.brandEngName = peijian.brandEngName.substring(0, peijian.brandEngName.length - 1);
					this.goodsDetail.category= this.goodsDetail.category.filter(
						(item) => {
						return item.parentName != "附加配件";
						}
					);
					this.goodsDetail.category.splice(this.goodsDetail.category.length-1,0,peijian);
				this.recommendGoods();


				if(this.ishot==true){
					this.initHistoryMoney();
					this.initIssueMoney();

				}


			},
			async initIssueMoney() {
				// 发行统计
				if (!this.series) {
					return
				}
				const res = await getIssueMoney(this.series[0].id);
				if (res.code == 200) {
					res.data[0].push("");
					res.data[0].unshift("");
					res.data[1].push(res.data[1][res.data[1].length - 1]);
					res.data[1].unshift(res.data[1][0]);
					this.categories1 = res.data[0];
					this.seriesData1 = res.data[1];
					this.getServerData2();
				}
			},
			getServerData2() {
				//模拟从服务器获取数据时的延时
				//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
				let res = {
					categories: this.categories1,
					series: [{
						name: "",
						legendShape: "none",
						data: this.seriesData1
					}],

				};
				this.chartData1 = JSON.parse(JSON.stringify(res));
			},
			async initFootprint() {
				const res = await addFootprint({
					goodsId: this.id
				});
			},
			async initHistoryMoney() {

				const res = await getHistoryMoney({
					status: 3,
					classificationId: this.goodsDetail.classificationId
					// classificationId: "8,6,121,23,30,50,105,110,112,"
				});

				if (res.code == 200) {
					res.data.date[0].push("");
					res.data.date[0].unshift("");
					res.data.price[0].push(res.data.price[0][res.data.price[0].length - 1]);
					res.data.price[0].unshift(res.data.price[0][0]);
					const max = Math.max(...res.data.price[0]);
					const min = Math.min(...res.data.price[0]);
					if (max && min) {
						this.historyMax = max;
						this.historyMin = min;
						this.volatility = String(((max - min) / max).toFixed(2)).split(".")[1];
					}
					this.categories = res.data.date[0];
					this.seriesData = res.data.price[0];
					this.getServerData();
				}
			},
			async initFixedShow() {
				const res = await getFixedShow();
				// console.log(res);
				this.fixedShow = res.rows.filter(item => item.brandName == "固定展示")[0].children;
			}
		},
		onLoad(option) {
			this.id = option.id;
			this.wishDetail = option.wishDetail;
			this.initBidName();
			this.initFixedShow();
			// uCharts.formatter.yAxisDemo1 = (val, index, opts) => {
			// 	return "$" + val;
			// }
			this.userId = uni.getStorageSync("userId")

			// this.initData();
			// this.getServerData();
			this.initFootprint();

		},
		onShow() {
			this.initData();
		},
		onReady() {
			if (this.wishDetail) {
				uni.setNavigationBarTitle({
					title: this.$t("commDetail.title1")
				});
			} else {
				uni.setNavigationBarTitle({
					title: this.$t("commDetail.title")
				});
			}
		}
	}
</script>

<style>
	page {
		background-color: #FBFBFB;
	}
</style>
<style lang="scss" scoped>
	movable-view {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 300%;
		height: 300%;
		// background-color: blue;
		// margin: auto;
		// transform: translate(-100%, -100%);
	}

	movable-area {
		height: 100%;
		width: 100%;
		position: fixed;
		// overflow: hidden;
		transform: translate(-150%, -150%);
		// background-color: red;
	}

	.enlargeImg {
		width: 200%;
		height: 200%;
		transform: translate3d(0, 0, 0) scale(0.25, 0.25);
		transform-origin: center;
		z-index: 9999999;
		// transform: translate(-25%, -25%);
	}

	.push-goods {
		margin-top: 30rpx;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		box-shadow: 0rpx -2rpx 16rpx 0rpx #00000019;
		color: #717184;
		font-size: 38rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
	}

	.font-col {
		color: #858585;
	}

	.up-icon {
		width: 14rpx;
		height: 15rpx;
		margin-right: 8rpx;
	}

	.detail-view {
		background-color: #FBFBFB;
	}

	.layout {
		margin: 0rpx 24rpx;
		padding-bottom: 112rpx;
	}

	.temp {
		padding-bottom: 0 !important;
		letter-spacing: 2rpx;
	}

	.search {
		padding: 14rpx 22rpx
	}

	.sold-goods {
		color: #fff;
		background-color: #000;
		padding: 7rpx 15rpx;
		font-size: 28rpx;
	}

	.indicator {
		@include flex(row);
		justify-content: center;

		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			transition: background-color 0.3s;

			&--active {
				background-color: #ffffff;
			}
		}
	}

	.indicator-num {
		border-radius: 40rpx;
		background: #D9D9D97F;
		padding: 4rpx 0;
		height: 36rpx;
		width: 116rpx;
		@include flex;
		justify-content: center;

		&__text {
			color: #FFFFFF;
			font-size: 24rpx;
			font-weight: bold;
		}
	}

	@mixin bg {
		border-radius: 20rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -2rpx 16rpx 0rpx #00000019;
		margin-top: 20rpx;
	}

	.no-margin {
		margin: 0 !important;
	}

	.price {
		font-family: PingFang SC;
		font-weight: bold;
		padding: 32rpx 24rpx;

		@include bg;

		.titleNew {
			margin: 18rpx 0;
			color: #000000;
			font-size: 30rpx;
			text-align: left;
		}

		.price-num {
			display: flex;
			align-items: center;
			margin-left: 20rpx;
			margin-top: 22rpx;

			.price-num-b {
				color: #FF0000;
				font-size: 36rpx;
				margin-right: 36rpx;
			}

			.price-num-s {
				// margin-left: 36rpx;
				color: #FF0000;
				font-size: 20rpx;
			}

			.name {
				color: #000000;
				font-size: 30rpx;
			}
		}

		.name {
			// margin-top: 22rpx;
		}
	}

	.status {

    @include bg;
    display: flex; // 设置样式
		align-items: center;
		padding: 26rpx 134rpx;
		color: #000000;
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 30rpx;

		.condition {}

		.abrasion {
			margin-left: 104rpx;
		}
	}

	.commodity-info {
		font-family: PingFang SC;
		font-weight: bold;
		padding: 24rpx 42rpx;
		text-transform: uppercase;

		@include bg;

		.titleGoods {
			color: #000000;
			font-size: 30rpx;
			padding: 24rpx 0;
		}

		.commodity-text {

			display: flex;
			flex-direction: column;
			color: #000;
			font-size: 24rpx;

			.lh {
				// margin-right: 30rpx;
				line-height: 50rpx;
				letter-spacing: 2rpx;

				.bd {
					color: #858585;
				}
			}

			.ls {
				margin-right: 30rpx;
				line-height: 50rpx;
				letter-spacing: 2rpx;

				.bd {
					color: #858585;
				}
			}

			.plaWid {
				// width: 200rpx;
				// text-overflow: ellipsis;
				// white-space: nowrap;
				// overflow: hidden;
				margin-right: 20rpx;
			}
		}
	}

	.commodity-recommend {
		// height: 896rpx;
		padding-bottom: 20rpx;
		@include bg
	}

	.btn {
		width: 100%;
		display: flex;
		position: fixed;
		height: 112rpx;
		bottom: 0;
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		border-radius: 0rpx;
		text-align: center;
		line-height: 112rpx;

		.toggleCart {
			background: #F1F1F1;
			width: 50%;
			color: #858585;
		}
	.toggleCart1 {
			background: #99603c;
			width: 50%;
			color: #FFFFFF;
		}
		.toggleBuy {
			width: 50%;
			background: #000000;
			color: #FFFFFF;

		}
	}

	.ls-width {
		width: 200rpx;
	}

	.title {
		text-align: center;
		padding-top: 40rpx;
		font-size: 34rpx;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;

		.rec-left {
			width: 80rpx;
			border: 0.5rpx solid #3d3d3d;
		}

		.rec-right {
			width: 80rpx;
			border: 0.5rpx solid #3d3d3d;
		}

		.rec-left-dot {
			width: 10rpx;
			height: 10rpx;
			background-color: #000;
			border-radius: 50%;
			margin-right: 26rpx;
		}

		.rec-right-dot {
			width: 10rpx;
			height: 10rpx;
			background-color: #000;
			border-radius: 50%;
			margin-left: 26rpx;
		}
	}

	.look-more {
		text-align: right;
		display: flex;
		align-items: center;
		flex-direction: row-reverse;
		margin-right: 74rpx;
		margin-top: 18rpx;

		text {
			color: #858585;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 20rpx;
		}
	}

	.more-img {
		width: 30rpx;
		height: 30rpx;
	}

	.price-record {
		@include bg;
	}

	.chats-view {
		height: 350rpx;
	}

	.chats-view2 {
		height: 280rpx;
	}

	.tabActive {
		background-color: #faad67;
		color: #fff;
	}

	.charts-tab {
		background-color: #f1f1f1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 20rpx 36rpx;
		border-radius: 10rpx;
		background: #F1F1F1;
		color: #858585;

		.tab {
			border-radius: 10rpx;
			padding: 8rpx 18rpx;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 24rpx;
			text-align: center;
		}
	}

	.price-history {
		padding: 0 24rpx;

		.history-data {
			color: #000000;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 24rpx;
		}

		.history-list {
			margin-top: 24rpx;

			.history-item:last-child {
				border-bottom: none;
			}

			.history-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx 0;
				border-bottom: 2rpx solid #F1F1F1;

				.history-key {
					color: #858585;
					font-family: PingFang SC;
					font-weight: regular;
					font-size: 24rpx;
				}

				.history-value {
					color: #FAAD67;
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 30rpx;
				}
			}
		}
	}

	@mixin r-btn {
		border-radius: 20rpx;
		background: #F1F1F1;
		color: #858585;
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 24rpx;
		line-height: 64rpx;
		text-align: center;
		width: 318rpx;
		height: 64rpx;
	}

	.record-btn {
		padding: 0 30rpx;
		padding-top: 20rpx;
		padding-bottom: 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.sales-record {
			@include r-btn;
		}

		.see-bid {
			@include r-btn;
		}
	}

	.price-btn {
		@include bg;
		height: 64rpx;
		margin-top: 45rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.price-btn-style {
			color: #858585;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 24rpx;
			line-height: 64rpx;
			text-align: center;
			flex: 1;
		}

		.ver-bar {
			border-right: 4rpx solid #F1F1F1;
		}
	}

	.pla {
		height: 45rpx;
		opacity: 1;
	}

	.comm-goods-list {
		padding: 25rpx 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		padding-top: 0;

		.comm-goods-item {
			display: flex;
			align-items: center;
			flex-direction: column;
			margin-top: 10rpx;

			.comm-goods-img {
				width: 320rpx;
				height: 230rpx;
				background: #FFFFFF;
				border: 2rpx solid #F7F7F7;
				border-radius: 20rpx;
			}

			.comm-goods-name {
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 700;
				font-size: 24rpx;
				margin-top: 18rpx;
				text-align: center;
				width: 300rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.comm-goods-desc {
				display: flex;
				justify-content: space-around;
				margin-top: 14rpx;
				align-items: center;
				width: 310rpx;

				.comm-goods-desc-price {
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 700;
					font-size: 32rpx;
					color: #FF0000;
				}

				.comm-goods-desc-low {
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 700;
					font-size: 15rpx;
					color: #FAAD67;
				}

				.comm-goods-desc-count {
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 700;
					font-size: 15rpx;
					color: #717184;
				}
			}
		}
	}

	.recomm {
		font-size: 30rpx;
		color: #858585;
		text-align: center;
	}
</style>
